<template>
  <div class="ecs" ref="mainChart"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'EchartBar',
  props: {
    barBgShow: {
      type: Boolean,
      default: false
    },
    XAxis:{
      type: Object,
      default: () => {}
    },
    YAxis:{
      type: Object,
      default: () => {}
    },
    dataAxis:{
      type: String,
      default: ''
    },
    xData:{
      type: Array,
      default: () => []
    },
    labelColor:{
      type: Array,
      default: () => []
    },
    barData:{
      type: Array,
      default: () => []
    },
    barColor:{
      type: [String,Function],
      default: ''
    },
    barBgColor:{
      type: String,
      default: ''
    },
    barGrid:{
      type: Object,
      default: () => {}
    },
    seriesLabel:{
      type: Object,
      default: () => {}
    },
    barWidth:{
      type: String,
      default: '60%'
    }
  },
  data() {
    return {
      myOption: {
        xAxis: this.XAxis,
        yAxis: this.YAxis,
        grid: this.barGrid,
        barWidth: this.barWidth,
        series: [
          {
            data: this.barData,
            type: 'bar',
            showBackground: this.barBgShow,
            itemStyle: {
              color: this.barColor
            },
            backgroundStyle: {
              color: this.barBgColor
            },
            label: this.seriesLabel
          }
        ]
      }
    }
  },
  computed: {
    
  },
  mounted() {
    let main = this.$refs.mainChart;
    let myChart = echarts.init(main,null,{renderer:'svg'});
    myChart.setOption(this.myOption);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  },
  watch: {
    barData: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.$nextTick(()=>{
          if (this.dataAxis === 'y') {
            this.myOption.xAxis.data = this.xData;
            this.myOption.series[0].data = newVal;
          }else{
            this.myOption.yAxis.data = this.xData;
            this.myOption.series[0].data = newVal;
          }          
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
        })
      }
    },
    barColor: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.$nextTick(()=>{
          this.myOption.series[0].itemStyle.color = newVal;
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
        })
      }
    },
    XAxis: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.$nextTick(()=>{
          this.myOption.xAxis = newVal;
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
        })
      }
    },
    YAxis: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.$nextTick(()=>{
          this.myOption.yAxis = newVal;
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
        })
      }
    },
    seriesLabel: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.$nextTick(()=>{
          this.myOption.series[0].label = newVal;
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
        })
      }
    },
    '$store.state': {
      deep: true,
      immediate: false,
      handler(newVal) {
        this.$nextTick(()=>{
          this.myOption.xAxis.axisLabel.color = newVal.colors.barLabelZiColor;
          this.myOption.yAxis.axisLabel.color = newVal.colors.barLabelZiColor;
          this.myOption.series[0].backgroundStyle.color = newVal.colors.barBgColor;
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
        })
      }
    },
  }
}
</script>
<style lang="less" scoped>
.ecs {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: transparent;
  z-index: 1;
}
</style>